<template>
    <div id="main">
        <!--顶部导航-->
        <el-container>
            <el-header>
                <el-row :guttr="24" type="flex">
                    <el-col :span="18">
                        <h1><b>百卓网络</b></h1>
                    </el-col>
                    <el-col :span="2" :offset="4">
                        <h3><b>用户</b> : &nbsp;&nbsp;<span style="color: rgb(255, 208, 75)">{{ userInfo.name }}</span></h3>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="danger" @click="signOut" size="mini">退出</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-col :span="24">
                        <el-menu
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b"
                                :default-active="$route.path">
                            <router-link to="/order_today">
                                <el-menu-item index="/order_today">
                                    <i class="el-icon-phone"></i>
                                    <span slot="title">今日订餐</span>
                                </el-menu-item>
                            </router-link>
                            <router-link to="/department">
                                <el-menu-item index="/department">
                                    <i class="el-icon-setting"></i>
                                    <span slot="title">部门配置</span>
                                </el-menu-item>
                            </router-link>
                            <router-link to="/users">
                                <el-menu-item index="/users">
                                    <i class="el-icon-document"></i>
                                    <span slot="title">用户设置</span>
                                </el-menu-item>
                            </router-link>
                            <router-link to="/time">
                                <el-menu-item index="/time">
                                    <i class="el-icon-time"></i>
                                    <span slot="title">时间设置</span>
                                </el-menu-item>
                            </router-link>
                        </el-menu>
                    </el-col>
                </el-aside>
                <el-main>
                    <div class="content">
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                userInfo: {
                    name: ''
                }
            }
        },
        methods: {
            signOut () {
                this.userInfo.name = '';
                sessionStorage.setItem('user', '');
                this.$router.push({path:'/login'})
            }
        },
        mounted () {
            if (sessionStorage.getItem('user')) {
                this.userInfo.name = JSON.parse(sessionStorage.getItem('user')).name || '';
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #545c70;
        color: #FFFFFF;
        line-height: 60px;
    }
    .el-aside {
        background-color: #545c64;
        color: #333;
        line-height: 200px;
        min-height: 565px;
    }
    .el-menu {
        border-color:#545c64
    }
    .el-main {
        padding: 10px;
    }
    a {
        text-decoration: none;
    }
    .content {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        padding: 10px;
        margin: 10px;
        min-height: 92%;
        min-width: 96%;
    }
</style>